let { $, table, layer, form } = layui;
import Add from "../componets/users/add.js";
import Delete from "../componets/users/delete.js";
import Set from "../componets/users/set.js";
import Get from "../componets/users/get.js";
export default class Users {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let str =
            `
            <head>
                <style>
                    td {
                        border: 1px solid black;
                    }
            
                    .right {
                        margin-left: 100px;
                        margin-top: -20px;
                    }
            
                    select {
                        margin-left: 100px;
                    }
            
                    button {
                        margin-left: 2px;
                    }
            
                    #top {
                        display: flex;
                    }
            
                    #ipt {
                        width: 200px;
                        margin: 0px 10px;
                    }
                </style>
            </head>
            
            <body>
                <table id="studentsTable" lay-filter="studentsTable"></table>
                
                <script type="text/html" id="barDemo">
                    <!-- 表格行 -->
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            
                <script type="text/html" id="tools">
                    <!-- 表格头部 -->
                    <div id="top" class="layui-form" lay-filter="search">
                        <button type="button" class="layui-btn" lay-event="adduers"><i class="layui-icon">&#xe654;</i></button>
                        <select name="type" lay-verify="">
                            <option value="username">姓名</option>
                            <option value="phone">手机号</option>
                        </select>
                        <input type="text" id="ipt" name="value" required lay-verify="required" placeholder="请输入查询内容" autocomplete="off"
                            class="layui-input layui-inline">
                        <button lay-event="search" type="button" class="layui-btn"><i class="layui-icon-search layui-icon"></i></button>
                    </div>
                </script>
                <script type="text/html" id="addStudentTemplate"></script>
            </body>`;

        $("#content").html(str);
    };

    handle() {
        table.render({
            elem: '#studentsTable' //对应的表格ID
            , url: '/users' //数据接口
            , method: "get" //数据请求类型，默认为get
            , toolbar: "#tools"//表头关联
            , page: true
            , limit: 10
            , limits: [5, 10, 15, 20, 25, 30]
            , request: {
                pageName: "current",//页码参数名称，默认为page
                limitName: "pageSize"//每页显示数量，默认为limit
            }
            , parseData: function (res) {
                return {
                    code: 0,
                    count: res.data.total,
                    data: res.data.rows
                }
            }
            , cols: [[ //表头
                { field: 'username', title: '姓名' }
                , { field: 'pwd', title: '密码' }
                , { field: 'phone', title: '手机号' }
                , {
                    field: 'email', title: '邮箱'
                }
                , { title: '操作', toolbar: "#barDemo", align: 'center' }
            ]]
        });
        // 头部工具事件
        table.on('toolbar(studentsTable)', function (obj) {
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (obj.event == "adduers") {
                new Add();
            };
            if (obj.event == "search") {
                new Get();
            }
        });

        //行工具条事件
        table.on('tool(studentsTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                new Delete(data, obj)
            } else if (layEvent === 'edit') { //编辑
                new Set(data);
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
    }

}